import { Button } from '@/components/ui/button';
import { Toaster } from '@/components/ui/sonner';
import { useMessage } from './hook/useGigaMessage';

import { getProductInfosByIds, searchProductIds } from '@/api/giga';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/alert-dialog';
import { BatchCollectOperation } from '@/components/BatchCollectOperation';
import BatchSetting from '@/components/BatchSetting';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/dialog';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import config, { GigaResourceInfoMessage, MessageType } from '@/config';
import {
  Task,
  TaskInfo,
  TaskType,
  useConcurrentRequest,
} from '@/entrypoints/hook/useConcurrentRequest';
import { useDirectoryHandle } from '@/entrypoints/hook/useDirectoryHandle';
import {
  createButton,
  getAllFDirectoryHandleByDirectoryHandle,
  observeWaitElement,
  waitEleRender,
} from '@/lib/utils';
import { name } from '@/package.json';
import { useSettingsStore } from '@/store';
import { toast } from 'sonner';
import AvailableCollect from '../../components/AvailableCollect';
import CollectSetting from './CollectSetting';
import { useGiga } from './hook/useGiga';
import LocalDiskInfo from './LocalDiskInfo';
import OperationMessages, { OperationMessageCategory } from './OperationMessage';
import AvaliableInfo from './AvaliableInfo';

export type CollectGigaProduct = ({
  skuIdInfo,
  gigaProductId,
  gigaSku,
  available,
  force,
}: TaskInfo) => Promise<void>;

export function isBatchCollectPage() {
  const href = location.href;
  return (
    href.startsWith('https://www.gigab2b.com/index.php?route=product/search') ||
    href.startsWith('https://www.gigab2b.com/index.php?route=product/category')
  );
}

export default function App() {
  const { resetMessage, addMessage } = useMessage();
  const [open, setOpen] = useState(false);
  const { collectGigaProduct } = useGiga();
  const { setCollectDirectoryHandle, getDirectoryHandle, gigaCatetoryDirectoryHandle } =
    useDirectoryHandle();
  const restoreQueueKey = name + '-restore-collect-key';
  const { enqueueTask, queue, totalTask, activeTask, completedTask, isStop, resume, clearQueue } =
    useConcurrentRequest(restoreQueueKey);
  const hasCollectFilterPage = useSettingsStore((state) => state.gigaSettings.hasCollectFilterPage);
  const clearMessageInterval = useSettingsStore((state) => state.baseSettings.clearMessageInterval);
  const isDefaultOpenCollect = useSettingsStore((state) => state.baseSettings.isDefaultOpenCollect);
  const filter = useSettingsStore((state) => state.gigaSettings.filter);
  const isResumeTask = useSettingsStore((state) => state.batchSettings.isResumeTask);
  const resumeTasks = JSON.parse(localStorage.getItem(restoreQueueKey) || '[]');
  const [skuInfos, setSkuInfos] = useState<string[]>([]);

  useEffect(() => {
    async function getSkuInfos() {
      if (gigaCatetoryDirectoryHandle) {
        const skuInfoDirectotyHandles = await getAllFDirectoryHandleByDirectoryHandle(
          gigaCatetoryDirectoryHandle,
        );
        const skuInfos = skuInfoDirectotyHandles.map((skuInfoDirectotyHandle) => {
          return skuInfoDirectotyHandle.name;
        });
        setSkuInfos(skuInfos);
      }
    }
    getSkuInfos();
  }, [gigaCatetoryDirectoryHandle]);

  // 运行并行的任务
  const runTaskItems = useCallback(async function runTaskItem(
    collectInfoList: TaskInfo[],
    collectGigaProduct: CollectGigaProduct,
    enqueueTask: (task: Task['task']) => Promise<unknown>,
  ) {
    return await Promise.all(
      collectInfoList.map((collectInfo: TaskInfo) => {
        const taskItem = () =>
          collectGigaProduct(collectInfo).catch((error) => {
            toast.error(`${collectInfo.skuIdInfo}: ${(error as Error).message}`);
          });
        taskItem.extraData = collectInfo;
        return enqueueTask(taskItem);
      }),
    );
  }, []);

  // 单产品采集
  useEffect(() => {
    async function handleCollectProductInfo() {
      // 首先获取 gigaSku 和可用数量
      const gigaSkuEle = document.getElementById('itemCode');
      if (gigaSkuEle) {
        const gigaSku = gigaSkuEle.textContent;
        const gigaProductId = new URL(location.href).searchParams.get('product_id');
        const skuIdInfo = gigaSku + config.gigaDelimiter + gigaProductId;

        // 读取库存
        const availableEle = document.querySelector(
          '.center-prices .el-row .el-input-number ~ .pl-12px .text-bold',
        );

        if (availableEle) {
          const available = Number(availableEle.textContent);
          // 开始进行产品收集
          try {
            if (gigaProductId && gigaSku) {
              await collectGigaProduct({
                skuIdInfo,
                gigaProductId,
                gigaSku,
                available,
                taskType: TaskType.collect,
              });
            }
          } catch (error) {
            console.log(error);
            toast.error(`${skuIdInfo}: ${(error as Error).message}`);
          }
        } else {
          // addMessage({
          //   type: OperationMessageType.error,
          //   category: skuIdInfo,
          //   message: `无法获取到库存,请先登录到 giga 或者是该产品需要和卖家联系`,
          // });
          toast.error(
            `${skuIdInfo}: 无法获取到库存,请先登录到 gigab2b 网页或者是该产品需要和卖家联系`,
          );
        }
      }
    }
    async function mount() {
      // 产品页按钮挂载
      const href = location.href;
      if (href.startsWith('https://www.gigab2b.com/index.php?route=product/product')) {
        const wrapperEle = await observeWaitElement(
          '.center-title',
          document.getElementById('productsApp')!,
          5000,
        ).catch((error) => {
          console.log(error);
        });
        if (wrapperEle) {
          const className = 'product-collect';
          let button = wrapperEle.querySelector(`.${className}`);
          if (button) {
            button.remove();
          }
          button = createButton('点击采集', `custom-btn ${className}`);
          // 插入到 wrapperEle 的第二个元素前
          wrapperEle.insertBefore(button, wrapperEle.children[1]);
          button.addEventListener('click', handleCollectProductInfo);
        }
      }
    }

    mount();
  }, [collectGigaProduct]);

  // 多产品采集
  useEffect(() => {
    async function handleCollectProductInfo(wraperEle: HTMLDivElement) {
      // 首先获取 gigaSku 和可用数量
      const gigaSkuEle = wraperEle.querySelector('.truncate');
      if (gigaSkuEle) {
        const gigaSku = gigaSkuEle.textContent!;
        const gigaProductId = wraperEle.dataset.gmdAttrProduct_id!;
        const skuIdInfo = gigaSku + config.gigaDelimiter + gigaProductId;

        // 读取库存
        const availableEle = wraperEle.querySelector('.qty-available');

        if (availableEle) {
          const available = parseInt(availableEle.textContent!);
          // 开始进行产品收集
          try {
            if (gigaProductId && gigaSku) {
              await collectGigaProduct({
                skuIdInfo,
                gigaProductId,
                gigaSku,
                available,
                taskType: TaskType.collect,
              });
            }
          } catch (error) {
            console.log(error);
            toast.error(`${skuIdInfo}: ${(error as Error).message}`);
          }
        } else {
          // addMessage({
          //   type: OperationMessageType.error,
          //   category: skuIdInfo,
          //   message: `无法获取到库存,请先登录到 giga 或者是该产品需要和卖家联系`,
          // });
          toast.error(
            `${skuIdInfo}: 无法获取到库存,请先登录到 gigab2b 网页或者是该产品需要和卖家联系`,
          );
        }
      }
    }

    let timmer: number | null = null;
    async function mount() {
      // 产品页按钮挂载
      if (isBatchCollectPage()) {
        function handleWrapper(eles: NodeListOf<HTMLDivElement>) {
          eles.forEach((ele) => {
            const className = 'search-product-collect';
            let button = ele.querySelector(`.${className}`);
            if (button) {
              button.remove();
            }
            button = createButton('点击采集', `custom-btn ${className}`);
            // 插入到 wrapperEle 的第二个元素前
            ele.appendChild(button);
            button.addEventListener('click', () => {
              handleCollectProductInfo(ele);
            });
          });
        }
        timmer = setInterval(() => {
          const wrapperEles = document.querySelectorAll(
            '.product-list .product-item',
          ) as NodeListOf<HTMLDivElement>;
          handleWrapper(wrapperEles);
        }, 2000) as unknown as number;
      }
    }

    mount();
    return () => {
      if (timmer) {
        clearInterval(timmer);
      }
    };
  }, [collectGigaProduct]);

  // 批量采集
  useEffect(() => {
    async function handleCollectProductInfo() {
      const wraperEles = document.querySelectorAll(
        '.product-list .product-item',
      ) as NodeListOf<HTMLDivElement>;
      const collectInfoList: TaskInfo[] = [];
      for (let index = 0; index < wraperEles.length; index++) {
        const wraperEle = wraperEles[index];
        // 首先获取 gigaSku 和可用数量
        const gigaSkuEle = wraperEle.querySelector('.truncate');
        if (gigaSkuEle) {
          const gigaSku = gigaSkuEle.textContent!;
          const gigaProductId = wraperEle.dataset.gmdAttrProduct_id!;
          const skuIdInfo = gigaSku + config.gigaDelimiter + gigaProductId;

          // 读取库存
          const availableEle = wraperEle.querySelector('.qty-available');

          if (availableEle) {
            const available = parseInt(availableEle.textContent!);
            // 开始进行产品收集
            collectInfoList.push({
              skuIdInfo,
              gigaProductId,
              gigaSku,
              available,
              taskType: TaskType.collect,
            });
          } else {
            // addMessage({
            //   type: OperationMessageType.error,
            //   category: skuIdInfo,
            //   message: `无法获取到库存,请先登录到 giga 或者是该产品需要和卖家联系`,
            // });
            toast.error(
              `${skuIdInfo}: 无法获取到库存,请先登录到 gigab2b 网页 或者是该产品需要和卖家联系`,
            );
            continue;
          }
        }
      }

      await runTaskItems(collectInfoList, collectGigaProduct, enqueueTask);
      if (totalTask.current.length === completedTask.current.length) {
        toast.success(`完成所有的批量任务`);
      }
    }
    async function mount() {
      if (isBatchCollectPage()) {
        let batchCollentButton: HTMLButtonElement | null =
          document.querySelector('#search-batch-collent');
        if (batchCollentButton) {
          batchCollentButton.remove();
        }
        batchCollentButton = createButton('批量采集', 'custom-btn');
        batchCollentButton.id = 'search-batch-collent';
        const div = document.createElement('div');
        div.textContent = '0';
        div.classList.add('badge');
        batchCollentButton.appendChild(div);
        document.body.appendChild(batchCollentButton);
        batchCollentButton.addEventListener('click', handleCollectProductInfo);
      }
    }

    mount();
  }, [addMessage, collectGigaProduct, enqueueTask]);

  // 筛选采集
  useEffect(() => {
    const minPage = 1;
    const maxPage = 3;
    const id = 'clstools-page-range';

    async function handleCollectProductInfo(data: any) {
      if (!hasCollectFilterPage) {
        return;
      }
      const wrapperEle = document.getElementById(id);
      // console.log(wrapperEle);
      if (wrapperEle) {
        const minPage = wrapperEle.querySelector<HTMLInputElement>('#min-page')?.value;
        const maxPage = wrapperEle.querySelector<HTMLInputElement>('#max-page')?.value;
        if (minPage && maxPage) {
          let min = parseInt(minPage);
          let max = parseInt(maxPage);
          const searchList: Record<string, any>[] = [];
          for (let index = min; index <= max; index++) {
            searchList.push({
              ...data,
              page: index,
            });
          }
          // console.log(searchList);
          try {
            const productIds = await Promise.all(
              searchList.map(async (params) => {
                const searchResult = await searchProductIds(params);
                if (searchResult.code === 200) {
                  const productIds = searchResult.data.product_list;
                  return productIds;
                } else {
                  throw new Error(`无法获取到搜索返回的产品 id 列表`);
                }
              }),
            );
            // console.log(productIds);
            // 对 productIds 进行降维
            const productIdsFlat = productIds.flat();

            if (productIdsFlat.length === 0) {
              throw new Error(`没有搜索到相关产品`);
            }

            const collectInfoList: TaskInfo[] = [];

            const productInfos = await getProductInfosByIds(productIdsFlat);

            if (productInfos.code === 200 && productInfos.data && productInfos.data.length > 0) {
              const data = productInfos.data;
              data.forEach((productInfo) => {
                if (!productInfo.product.quantity_info) {
                  // 如果采集不到库存信息,那么这些信息需要和卖家联系,这样的产品不用进入到采集
                  return;
                }
                collectInfoList.push({
                  skuIdInfo:
                    productInfo.product.sku + config.gigaDelimiter + productInfo.product.id,
                  gigaProductId: '' + productInfo.product.id,
                  gigaSku: productInfo.product.sku,
                  available: parseInt(productInfo.product.quantity_info.qty_str),
                  taskType: TaskType.collect,
                });
              });

              await runTaskItems(collectInfoList, collectGigaProduct, enqueueTask);
              if (totalTask.current.length === completedTask.current.length) {
                toast.success(`完成所有的批量任务`);
              }
            } else {
              throw new Error(`无法通过 id 获取到产品的详细信息`);
            }
          } catch (error) {
            console.log(error);
            toast.error(`${(error as Error).message}`);
          }
        }
      }
    }

    async function handleParams(event: MessageEvent<any>) {
      // console.log(event);
      // 检查消息来源是否可信
      if (event.origin !== 'https://www.gigab2b.com') return;

      // 处理接收到的消息
      if (event.data.type === 'GIGAB2B_COLLECT_DATA') {
        // 在这里处理接收到的数据
        // 错开 500ms 防止出现多次相同提交后被封锁
        setTimeout(() => {
          handleCollectProductInfo({
            ...event.data.data,
            ...filter,
          });
        }, 1000);
      }
    }
    async function mount() {
      if (!hasCollectFilterPage) {
        return;
      }
      // 产品页按钮挂载
      if (isBatchCollectPage()) {
        // 监听对应的拦截信息
        window.addEventListener('message', handleParams);

        // 创建相关的 UI
        const wrapperEle = await observeWaitElement('.line-clamp-2', document.body, 5000).catch(
          (error) => {
            console.log(error);
          },
        );
        if (wrapperEle) {
          let div = wrapperEle.querySelector(`#clstools-page-range`);
          if (div) {
            div.remove();
          }
          div = document.createElement('div');
          div.id = id;
          const header = document.createElement('span');
          header.textContent = '点击筛选或分页页码时采集的页数范围: ';
          const minPageInput = document.createElement('input');
          minPageInput.type = 'number';
          minPageInput.value = minPage.toString();
          minPageInput.id = 'min-page';
          const span = document.createElement('span');
          span.textContent = '~';
          const maxPageInput = document.createElement('input');
          maxPageInput.type = 'number';
          maxPageInput.value = maxPage.toString();
          maxPageInput.id = 'max-page';
          div.appendChild(header);
          div.appendChild(minPageInput);
          div.appendChild(span);
          div.appendChild(maxPageInput);
          // button = createButton('点击采集', `custom-btn ${className}`);
          // 插入到 wrapperEle 的第二个元素前
          wrapperEle.insertBefore(div, wrapperEle.children[1]);
          // button.addEventListener('click', handleCollectProductInfo);
        }
      }
    }
    mount();

    // 给库存筛选框一个配置
    async function setQtyminQty() {
      if (isBatchCollectPage() && filter && filter.qty_min) {
        const qtyminQty = (await waitEleRender(
          'body > div:nth-child(5) > div:nth-child(2) > div  div  div > div > div:nth-child(6) > div.field-content > div > div.range-min.el-input.el-input--medium.el-input--suffix > input',
          5000,
        )) as HTMLInputElement;
        if (qtyminQty) {
          qtyminQty.value = filter.qty_min;
        }
      }
    }
    setQtyminQty();

    return () => {
      window.removeEventListener('message', handleParams);
    };
  }, [hasCollectFilterPage, collectGigaProduct, enqueueTask, filter]);

  // 监听批量上传的状态信息
  useEffect(() => {
    let timer: number | null = null;
    if (isBatchCollectPage()) {
      timer = setInterval(() => {
        const ele = document.querySelector<HTMLButtonElement>('#search-batch-collent');
        if (ele) {
          ele.title = `正在处理: ${activeTask.current.length}\n代处理: ${queue.current.length}\n已处理: ${completedTask.current.length}\n总: ${totalTask.current.length}\n状态: ${isStop.current ? '已暂停' : '运行中'}`;
          const badge = ele.querySelector('.badge');
          badge && (badge.textContent = `${queue.current.length + activeTask.current.length}`);
        }
      }, 500) as unknown as number;
    }

    return () => {
      if (timer) {
        clearInterval(timer);
      }
    };
  }, []);

  // 点击查看采集详情
  useEffect(() => {
    let infoButton: HTMLButtonElement | null = document.querySelector('#collent-info');
    if (infoButton) {
      infoButton.remove();
    }
    infoButton = createButton('采集详情', 'custom-btn');
    infoButton.id = 'collent-info';
    document.body.appendChild(infoButton);
    infoButton.style.cssText = 'position: fixed; top: 10px; left: 10px; z-index: 1000';
    infoButton.addEventListener('click', () => {
      setOpen(true);
    });
  }, []);

  // 监听采集详情
  useEffect(() => {
    async function handleMessage(message: GigaResourceInfoMessage) {
      if (message.type === MessageType.gigaResourceInfo) {
        setOpen(true);
      }
    }
    browser.runtime.onMessage.addListener(handleMessage);
    return () => {
      browser.runtime.onMessage.removeListener(handleMessage);
    };
  });

  // 恢复批量上传的任务
  const resumeTask = useCallback(
    async function resumeTask() {
      if (resumeTasks.length > 0) {
        // 清空后防止多次触发
        localStorage.setItem(restoreQueueKey, '');
        runTaskItems(resumeTasks, collectGigaProduct, enqueueTask);
      }
    },
    [runTaskItems],
  );

  useEffect(() => {
    if (isResumeTask) {
      resumeTask();
    }
  }, [isResumeTask, resumeTask]);

  // 每隔一段时间清理一下 messages 信息
  useEffect(() => {
    const timer = setInterval(() => {
      resetMessage();
    }, clearMessageInterval * 1000);
    return () => {
      clearInterval(timer);
    };
  }, [clearMessageInterval]);

  useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
  }, [open]);

  // 是否默认打开采集详情的弹框
  useEffect(() => {
    if (isDefaultOpenCollect) {
      setOpen(true);
    }
  }, [isDefaultOpenCollect]);

  return (
    <div>
      <div>
        <AlertDialog defaultOpen={!isResumeTask && resumeTasks.length > 0}>
          <AlertDialogContent
            style={{
              zIndex: config.alertDialogZIndex,
            }}
          >
            <AlertDialogHeader>
              <AlertDialogTitle>采集任务恢复</AlertDialogTitle>
              <AlertDialogDescription>
                {`检测到上次采集还有 ${resumeTasks.length} 个任务未完成，是否继续采集？`}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>不采集</AlertDialogCancel>
              <AlertDialogAction onClick={resumeTask}>继续采集</AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
        <Dialog modal={false} open={open} onOpenChange={setOpen}>
          <DialogContent
            aria-describedby=""
            className="w-[90%] max-w-[1500px] h-[90vh] grid-rows-[auto_1fr]"
            style={{
              outline: `${open ? '9000px solid #000000e0' : 'none'}`,
              zIndex: config.dialogZIndex,
            }}
          >
            <DialogHeader>
              <DialogTitle className="text-card-foreground/80" id="">
                giga 产品采集详情
              </DialogTitle>
            </DialogHeader>
            <div className="flex">
              <LocalDiskInfo
                runTaskItems={runTaskItems}
                enqueueTask={enqueueTask}
                totalTask={totalTask}
                completedTask={completedTask}
              ></LocalDiskInfo>

              <Tabs defaultValue="collect" className="flex flex-col grow">
                <div className="flex">
                  <TabsList>
                    <TabsTrigger value="collect">产品采集</TabsTrigger>
                    <TabsTrigger value="base-setting">基础设置</TabsTrigger>
                    <TabsTrigger value="collect-setting">采集设置</TabsTrigger>
                    <TabsTrigger value="batch-setting">批量设置</TabsTrigger>
                  </TabsList>
                  <SettingsPersisted className="ml-auto"></SettingsPersisted>
                </div>
                <TabsContent
                  value="collect"
                  className="grow flex flex-col data-[state=inactive]:hidden"
                >
                  <Card className="grow flex flex-col">
                    <CardHeader className="pb-4">
                      <CardTitle className="opacity-75 text-base">采集详细信息</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2 grow flex flex-col">
                      <OperationMessages
                        categoryItemActionRenderer={(categoryItem) => {
                          return (
                            <OperationMessageCategory
                              categoryItem={categoryItem}
                            ></OperationMessageCategory>
                          );
                        }}
                        className="grow"
                      ></OperationMessages>
                    </CardContent>
                    <CardFooter className="block">
                      <div className="flex items-center">
                        <Button
                          size="sm"
                          onClick={setCollectDirectoryHandle}
                          className="hover:bg-[#337AB7] bg-[#428BCA]"
                        >
                          设置采集目录
                        </Button>
                        <Button
                          size="sm"
                          variant="destructive"
                          onClick={resetMessage}
                          className="hover:bg-destructive/90 bg-destructive ml-auto"
                        >
                          清空列表
                        </Button>
                      </div>

                      <BatchCollectOperation
                        isStop={isStop}
                        queue={queue}
                        completedTask={completedTask}
                        totalTask={totalTask}
                        activeTask={activeTask}
                        resume={resume}
                        clearQueue={clearQueue}
                      ></BatchCollectOperation>
                    </CardFooter>
                  </Card>
                </TabsContent>
                {/* <TabsContent
                  value="available-collect"
                  className="grow flex flex-col data-[state=inactive]:hidden"
                >
                  <Card className="grow flex flex-col relative">
                    <CardContent className="space-y-2 grow flex flex-col">
                      <AvailableCollect
                        categoryName={gigaCatetoryDirectoryHandle?.name || ''}
                        skuInfos={skuInfos}
                        className="grow"
                      ></AvailableCollect>
                    </CardContent>
                  </Card>
                </TabsContent> */}
                <TabsContent
                  value="base-setting"
                  className="grow flex flex-col data-[state=inactive]:hidden"
                >
                  <Card className="grow flex flex-col">
                    <CardHeader>
                      <CardTitle className="opacity-75 text-base">基础设置</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2 grow flex flex-col">
                      <BaseSetting className="grow"></BaseSetting>
                    </CardContent>
                  </Card>
                </TabsContent>
                <TabsContent
                  value="collect-setting"
                  className="grow flex flex-col data-[state=inactive]:hidden"
                >
                  <Card className="grow flex flex-col">
                    <CardHeader>
                      <CardTitle className="opacity-75 text-base">采集设置</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2 grow flex flex-col">
                      <CollectSetting className="grow"></CollectSetting>
                    </CardContent>
                  </Card>
                </TabsContent>
                <TabsContent
                  value="batch-setting"
                  className="grow flex flex-col data-[state=inactive]:hidden"
                >
                  <Card className="grow flex flex-col">
                    <CardHeader>
                      <CardTitle className="opacity-75 text-base">批量任务设置</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2 grow flex flex-col">
                      <BatchSetting className="grow"></BatchSetting>
                    </CardContent>
                  </Card>
                </TabsContent>
              </Tabs>
            </div>
          </DialogContent>
        </Dialog>
      </div>
      <AvaliableInfo></AvaliableInfo>
      <Toaster className="[&_li]:p-4"></Toaster>
    </div>
  );
}
